<template>
  <div class="custom-element-wrapper">
    <!-- 筛子 -->
    <span class="iconfont dice" :class="`icon-dice${payload.description}`" v-if="payload.data=='dice'"></span>
    <!-- 商品 -->
    <custom-shop-msg v-else-if="payload.data=='product'" :shopInfo='JSON.parse(payload.extension)' />
    <custom-shop-msg v-else-if="payload.data=='shops'" :shopInfo='JSON.parse(payload.description)' />
    <custom-order-msg v-else-if="payload.data=='order'" :orderInfo='JSON.parse(payload.extension)' />

    <!-- 新闻 -->
    <custom-news-msg v-else-if="payload.data=='share-news'" :newsInfo='JSON.parse(payload.description)' />
    <!-- 普通 -->
    <span v-else>{{text}}</span>

  </div>
</template>

<script>
import customShopMsg from "./custom-shop-msg";
import customOrderMsg from "./custom-order-msg";
import customNewsMsg from "./custorm-news-msg";
export default {
  name: "CustomElement",
  props: {
    payload: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      showHb: false,
      user: {},
      hbinfo: {},
    };
  },
  components: {
    customShopMsg,
    customNewsMsg,
    customOrderMsg
  },
  computed: {
    text() {
      return this.translateCustomMessage(this.payload);
    },
    obj() {
      if (typeof JSON.parse(this.payload.description) == "object") {
        return JSON.parse(this.payload.description);
      } else {
        return {};
      }
    },
  },
  methods: {
    translateCustomMessage(payload) {
      if (payload.data === "group_create") {
        return `${payload.extension}`;
      }
      return "[自定义消息]";
    },
    redsend(oid) {
      if (!oid) {
        this.$toast.fail("领取失败");
        return;
      }
      this.$api.getIm.getHongBao({ oid }).then((res) => {
        if (res.code == 200) {
          this.hbinfo = res.result;
          this.showHb = true;
        }
      });
    },
    getcloseHb(bool) {
      this.showHb = bool;
    },
  },
};
</script>

<style scoped>
.hbdetails {
  width: 100%;
  background: none !important;
}
.dice {
  font-size: 60px;
  height: 60px;
  color: #fff;
  background: #000;
}
</style>
